import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { rootState } from "./store";
import { IAdmin, IAdminActionType } from "./store/reducers/admin";
import { IUser, IUserActionType } from "./store/reducers/user";

// Hooks只能在函数式组件中使用
const HookExample = () => {
  const { user } = useSelector<rootState, { user: IUser }>(
    (state: rootState) => state.user,
    shallowEqual
  );
  const { admin } = useSelector<rootState, { admin: IAdmin }>(
    (state: rootState) => state.admin,
    shallowEqual
  );
  const dispatch = useDispatch();

  const changeUserName = () => {
    dispatch({
      type: IUserActionType.CHANGE,
      payload: {
        user: {
          name: "change user YUSIR",
        },
      },
    });
  };
  const changeAdminName = () => {
    dispatch({
      type: IAdminActionType.CHANGE,
      payload: {
        admin: {
          name: "change Admin YUSIR",
        },
      },
    });
  };
  return (
    <>
      <h1>hook结合redux</h1>
      {admin.name}
      <br />
      {user.name}
      <br />

      <button onClick={changeAdminName}>change admin name</button>
      <button onClick={changeUserName}>change user name</button>
    </>
  );
};

export default HookExample;
